<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <title>Document</title>
    </head>
<body>
    <div id = 'app'>
      <p>{{message}}</p>
      <p>
          <!-- 缺点：大量的业务逻辑写在了视图中，页面代码不简洁 -->
          反转字符串：{{  message.split('').reverse().join('')  }}
      </p>
      <input type="text" v-model ='message' />
      <!-- 解决方案1：计算属性 -->
      <p>计算属性：{{reversemessage}}</p>
      <p>计算属性：{{reversemessage}}</p>
      <p>计算属性：{{reversemessage}}</p>
      <p>计算属性：{{reversemessage}}</p>

      <!-- 解决方案2：方法 -->
        <p>{{resversed()}}</p>
        <p>{{resversed()}}</p>
        <p>{{resversed()}}</p>
        <p>{{resversed()}}</p>
    </div>
<script src = 'vue.js'></script>
<script>
    new Vue({
        el:'#app',
        data () {
            return {
               message: '不许动' 
            }
        },
        computed: {
            reversemessage(){
                console.log('计算属性被计算')
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            resversed(){
                console.log('resversed方法被调用')
               return this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>